<template>
    <div class="invite-card-container">
        <div class="invite-card">
            <div class="invite-code invite-box">
                <div class="invite-title">邀请码</div>
                <div class="invite-right">
                    {{ inviteCode }}
                    <span class="aabiok icon-fuzhi" :data-clipboard-text="inviteCode" id="copyUrl"></span>
                </div>
                <!-- <div class="btn-invite" :data-clipboard-text="inviteCode"  id="copyUrl">复制</div> -->
            </div>
            <div class="invite-url invite-box">
                <div class="invite-title">邀请链接</div>
                <div class="invite-right">
                    <span class="url-text">{{ inviteUrl }}</span>
                    <span class="aabiok icon-fuzhi" :data-clipboard-text="inviteUrl" id="copyUrl"></span>
                </div>
                <!-- <div class="btn-invite" :data-clipboard-text="inviteUrl"  id="copyUrl">复制</div> -->
            </div>
        </div>
        <van-button style="margin-top: 20px" block type="primary" size="small" native-type="submit"
            @click="handleShare">分享</van-button>

        <div class="kefu-tip">邀请问题可随时<span class="maincolor" @click="$router.push('/setting/kefu')">联系客服</span></div>
    </div>
</template>

<script>
import { mapState } from 'pinia'
import { useUserStore } from '@/store/user'
import { showToast, showSuccessToast } from 'vant'
import ClipboardJS from 'clipboard'
import { seriesLoadScripts } from '@/utils/util'
export default {
    name: 'invite',
    props: {},
    data() {
        return {
        };
    },
    components: {},
    created() {
        this.setCopy()
    },
    computed: {
        ...mapState(useUserStore, ['userInfo']),
        inviteCode() {
            return this.userInfo.inviteCode;
        },
        inviteUrl() {
            return `https://www.aiaabiok.com/register?inviteCode=${this.userInfo.inviteCode}`;
        },

    },
    methods: {
        setCopy() {
            let clipborad = new ClipboardJS('#copyUrl')
            //复制成功
            clipborad.on('success', function () {
                showSuccessToast('复制成功')
            })
            //复制失败
            clipborad.on('error', function () {
                showToast('复制失败')
            })
        },
        handleShare() {

            const shareInfo = {
                title: 'AG-顶级量化信号推送',
                desc: '五大顶级策略带你拿捏趋势',
                url: this.inviteUrl,
                imgUrl: 'https://www.aiaabiok.com/ag.png',
            };
            // if (typeof navigator !== 'undefined' && typeof navigator.share === 'function') {
            //     // 这里写入分享的逻辑代码
            //     navigator.share({
            //         //要共享的标题
            //         title: shareInfo.title,
            //         //要共享的 URL
            //         url: shareInfo.url,
            //         //要共享的文本
            //         text: shareInfo.desc,
            //     });

            // } else {
                seriesLoadScripts('https://res.wx.qq.com/open/js/jweixin-1.6.0.js', () => {
                    getWxConfig({
                        url: 'https://www.aiaabiok.com/invite',
                    }).then(res => {
                        console.log(res);
                        if (res.code === 20000) {
                            const { appId, timestamp, nonceStr, signature } = res.data;
                            wx.config({
                                debug: true, // 开发阶段建议打开调试模式
                                appId, // 公众号或小程序的 AppID
                                timestamp, // 生成签名的时间戳
                                nonceStr, // 生成签名的随机串
                                signature, // 签名
                                jsApiList: ['updateAppMessageShareData', 'checkJsApi'], // 需要使用的JS接口列表
                            });
                            setTimeout(() => {
                                wx.ready(function () {
                                    wx.checkJsApi({
                                        jsApiList: [
                                            'updateAppMessageShareData',
                                        ], // 需要检测的JS接口列表，所有JS接口列表见附录2,
                                        success: function (res) {
                                            console.log('checkJsApi', res);
                                        }
                                    })
                                    // 分享朋友
                                    wx.updateAppMessageShareData({
                                        title: shareInfo.title, // 分享标题
                                        desc: shareInfo.desc, // 分享描述
                                        link: shareInfo.url, // 分享链接
                                        imgUrl: shareInfo.imgUrl, // 分享图标
                                        success: function (){
                                            // 用户确认分享后执行的回调函数
                                            console.log('updateAppMessageShareData分享朋友 success')
                                        },
                                        fail: function (err){
                                            // 用户确认分享后执行的回调函数
                                            console.log('分享失败', err)
                                        },
                                    });

                                    // 分享朋友圈
                                    // wx.updateTimelineShareData({
                                    //     title: shareInfo.title, // 分享标题
                                    //     link: shareInfo.url, // 分享链接
                                    //     imgUrl: shareInfo.imgUrl, // 分享图标
                                    //     success: () => {
                                    //         // 用户确认分享后执行的回调函数
                                    //         showToast('分享朋友圈成功');
                                    //         console.log('分享朋友圈 success')
                                    //     }
                                    // });
                                })
                            }, 10000)
                            
                           
                        }
                    })
                });
                console.log('该设备不支持分享功能');
            // }
        }
    }
};
</script>
<style lang="less" scoped>
// 邀请码
.invite-card {
    border-radius: 8px;
    display: flex;
    align-items: center;
    background-color: #f6f6f6;
    border: 1px solid #f0f0f0;
    padding: 0 10px;
    flex-direction: column;

    .invite-title {
        flex: 1;
        font-weight: 500;
        color: #8e939a;
        font-size: 12px;
    }

    .invite-url {
        border-top: 1px solid #e8e8e8;
    }

    .invite-right {
        color: #1c1c1c;
        font-size: 12px;
        display: flex;

        align-items: center;

        .url-text {
            display: block;
            max-width: 170px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
    }

    .btn-invite {
        cursor: pointer;
        width: 80px;
        text-align: center;
        height: 28px;
        line-height: 28px;
        text-align: center;
        border-radius: 14px;
        color: var(--main-color);
        border: 1px solid var(--main-color);
        font-weight: 600;
    }

    .aabiok {
        margin-left: 10px;
    }
}

.invite-box {
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;
}
</style>